<!-- 使用该组件时 须有一个包含块 -->
<template>
  <div class="container">
    <!--捕获人脸区域-->
    <div class="savevideoCamera-canvasCamera">
      <video
        id="videoCamera2"
        :width="videoWidth"
        :height="videoHeight"
        autoplay
      ></video>
      <canvas
        style="display: none"
        id="canvasCamera2"
        :width="videoWidth"
        :height="videoHeight"
      ></canvas>

      <!--人脸特效区域-->
      <div v-if="faceImgState" class="saveface-special-effects-2"></div>
      <div v-else class="saveface-special-effects"></div>
      <el-input type="hidden" v-model="faceBase"></el-input>
    </div>

    <!--拍照显示区域-->
    <div class="savefaceBase" id="faceBase">
      <img src="" ref="imgRef" v-show="faceBase" />
      <div class="saveface-tips">请对准您的脸部, 以确保人脸识别的精确度</div>
    </div>

    <!--按钮区域-->
    <div class="saveface-btn" v-if="cameraState">
      <el-button type="success" plain @click="enteringFace">
        {{ faceBase == "" ? "录入人脸" : "重新录入" }}
      </el-button>
    </div>
    <div class="saveface-btn" v-else>
      <el-button type="primary" plain disabled>摄像头正在加载...</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, Ref, watch, onBeforeUnmount } from "vue";
// types
import type { IOption } from "@/types/Camera/cameraOptionType";
// utils
import $camera from "@/camera";

// 接口 清除图像
interface ClearFaceBaseProps {
  // 清除图像
  clearFaceBase: boolean;
}
// 接受父组件参数，配置默认值
const props = withDefaults(defineProps<ClearFaceBaseProps>(), {
  clearFaceBase: false
});

watch(
  () => props.clearFaceBase,
  (val) => {
    if (val) {
      faceBase.value = "";
      imgRef.value.src = "";
    }
  },
  { immediate: true, deep: true }
);




// 图片数据
let faceBase: Ref<string> = ref("");

// video/canvas
const videoWidth: Ref<number> = ref(200);
const videoHeight: Ref<number> = ref(200);
const faceImgState: Ref<boolean> = ref(false);
const cameraState: Ref<boolean> = ref(false);

// 传递的draw-camera参数
let faceOption = ref<IOption>({
  videoWidth: 0,
  videoHeight: 0,
  thisCanvas: null,
  thisContext: null,
  thisVideo: null,
  canvasId: "",
  videoId: "",
});

onMounted(() => {
  setTimeout(() => {
    // 开启摄像头
    faceOption.value = $camera.getCamera({
      videoWidth: 200,
      videoHeight: 200,
      thisCanvas: null,
      thisContext: null,
      thisVideo: null,
      canvasId: "canvasCamera2",
      videoId: "videoCamera2",
    });
    // 开启摄像头之后 提示文字改变
    cameraState.value = true;
  }, 1000);
});

const handleCloseCamera = () => {
  // @ts-ignore
  faceOption.value.thisVideo.srcObject.getTracks()[0].stop();
}

defineExpose({ handleCloseCamera })

onBeforeUnmount(() => {
  handleCloseCamera()
});

// img-dom
const imgRef = ref<HTMLImageElement | any>(null);

// 子传父
interface EmitEvent {
  (e: "confirm", params: any): void;
}
const emit = defineEmits<EmitEvent>();

// 点击录入人脸
const enteringFace = () => {
  faceBase.value = $camera.draw(faceOption.value);
  imgRef.value.src = faceBase.value;

  emit("confirm", {
    // 图像数据
    faceBase: faceBase.value,
    // 不清除图片
    clearFaceBase: false,
  });
};
</script>

<style scoped lang="scss">
.savevideoCamera-canvasCamera {
  position: relative;
  width: 200px;
  height: 200px;
}
.saveface-special-effects,
.saveface-special-effects-2 {
  width: 270px;
  height: 270px;
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 0;
  margin-left: 100px;
}
.saveface-special-effects {
  background: url("@/assets/images/login/face.gif") no-repeat;
//   background-size: 280px 280px;
  background-size: cover;
}
.saveface-special-effects-2 {
  background: url("@/assets/images/login/face_detection.gif") no-repeat;
//   background-size: 280px 280px;
  background-size: cover;
}
.saveface-btn {
  width: 100%;
  height: 50px;
  z-index: 999999999999 !important;
  margin-top: 45px;
  text-align: left;
}
.saveface-btn button {
  // background-color: #ffffff;
  border: 1px solid #dcdfe6;
  width: 200px;
  height: 40px;
  color: #333333;
  cursor: pointer;
}

.savefaceBase {
  width: 200px;
  height: 200px;
  position: absolute;
  // z-index: 99999999999 !important;
  transform: translate(-50%, -50%);
  top: 34%;
  left: 75%;
  border: 1px dashed #000;
  .saveface-tips {
    position: absolute;
    left: 0;
    top: 110%;
    // border: 1px solid red;
    font-size: 16px;
  }
}
.savefaceBase img {
  width: 100%;
  height: 100%;
}
</style>
